import React from 'react';

import useTitle from '../../hooks/useTitle';
// eslint-disable-next-line
import { useState, useRef, useEffect } from 'react';
import './index.css';
import data from '../../static/mock';
function Review() {
  useTitle(Review.title);
  // const ref = useRef();
  // console.log(ref.current)
  const [currentInfo, setCurrentInfo] = useState(data[0])
  // ref.current.style.setPropertyValue('--dep-img', '../../static/shoushu.png')
  function operation(){
    setCurrentInfo(data[0])
  }
  function prepare(){
    setCurrentInfo(data[1])
  }
  function inject(){
    setCurrentInfo(data[2])
  }
  function immunity(){
    setCurrentInfo(data[4])
  }
  function inpatient(){
    setCurrentInfo(data[5])
  }
  function clinic(){
    setCurrentInfo(data[3])
  }
  function treatment(){
    setCurrentInfo(data[6])
  }
  return (
    <div className='review' id='reviewer'>
      <div className='map-box'>
        <div className='map'>
          <div className='left-map'>
            <div className='l-top-map'>
              <div className='left-shoushu'>
                <div className='shoushu1'>
                <div className='left-zhunbei1' onClick={prepare}>手术准备室</div>
                  <div className='left-doit1'  onClick={operation}>手术室</div>
                </div>
                <div className='shoushu2'>
                <div className='left-zhunbei2'  onClick={prepare}>手术准备室</div>
                  <div className='left-doit2'  onClick={operation}>手术室</div>
                </div>
              </div>
              <div className='right-shoushu'>
                  <div className='right-zhunbei'  onClick={prepare}>手术准备室</div>
                  <div className='right-doit'  onClick={operation}>手术室</div>
              </div>
            </div>
            <div className='l-bottom-map' onClick={inpatient}>
              住院部
            </div>
          </div>
          <div className='right-map'>
            <div className='r-top-map'>
            <div className='zhenshi'>
            <div className='zhenshi1'>
             <div className='topzhenshi1' onClick={clinic}>
             诊疗室
             </div>
             <div className='topzhenshi2' onClick={clinic}>
             诊疗室
             </div>
              </div>
              <div className='zhenshi2' onClick={clinic}>
              诊疗室
              </div>
            </div>
              <div className='zhushe' onClick={inject}>
                化验室
              </div>
            </div>
            <div className='r-middle-map'>
              <div className='mianyi' onClick={immunity}>配药室</div>
              <div className='mianyi' onClick={immunity}>配药室</div>
            </div>
            <div className='r-bottom-map' onClick={treatment}>
              隔离室
            </div>
          </div>
        </div>
      </div>
      <div className='info-box'>
        <div className='department'>
          <div className='review-topbar'>科室信息
            <div className='current-name'>{currentInfo[0].name}</div>
          </div>
          <div className={currentInfo[0].className}></div>
          <div className='dep-info'>{currentInfo[0].detail}</div>
        </div>
        <div className='equipment'>
          <div className='review-topbar'>设备信息</div>
          <div className='equ-item'>
            <div className={currentInfo[1].first.className}></div>
            <div className='equ-detail'>{currentInfo[1].first.detail}</div>
          </div>
          <div className='equ-item'>
          <div className={currentInfo[1].second.className}></div>
            <div className='equ-detail'>{currentInfo[1].second.detail}</div>
          </div>
          <div className='equ-item'>
          <div className={currentInfo[1].thrid.className}></div>
            <div className='equ-detail'>{currentInfo[1].thrid.detail}</div>
          </div>
        </div>
        <div className='drugs'>
          <div className='review-topbar'>药品信息</div>
          <div className='drug-item'>
            <div className={currentInfo[2].first.className}></div>
            <div className='drug-detail'>
              <div className='drug-name'>{currentInfo[2].first.name}</div>
              <div className='drug-info'>{currentInfo[2].first.detail}</div>
            </div>
          </div>
          <div className='drug-item'>
            <div className={currentInfo[2].second.className}></div>
            <div className='drug-detail'>
              <div className='drug-name'>{currentInfo[2].second.name}</div>
              <div className='drug-info'>{currentInfo[2].second.detail}</div>
            </div>
          </div>
          <div className='drug-item'>
            <div className={currentInfo[2].thrid.className}></div>
            <div className='drug-detail'>
              <div className='drug-name'>{currentInfo[2].thrid.name}</div>
              <div className='drug-info'>{currentInfo[2].thrid.detail}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Review.path = '/review';
Review.title = '医院导览';
Review.meta = {
    keywords:
      '导览',
    description:
      '宠物医院 地图导览'
  };
Review.exact = true;

export default Review;
